<template>
  <div class="dashboard-editor-container">
    <div class="jgy_txt">{{brandInfo.simpleName}}大数据平台</div>
    <div class=" time flex felx_align flex_bet">
      <div class="flex felx_align ">
        <div class="year">{{times.year}}</div>
        <div class="year">{{times.days}}</div>
      </div>
      <el-dropdown trigger="click" size="small" @command="handleCommand">
        <el-button type="primary" size="small" class="abbs">
          {{infoNmae}}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <div>
          <el-dropdown-menu slot="dropdown">
            <el-scrollbar>
              <el-dropdown-item v-for="item in userInfo" :key="item.id" :command="item">{{item.username}}</el-dropdown-item>
            </el-scrollbar>
          </el-dropdown-menu>
        </div>
      </el-dropdown>
    </div>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="ccc box_home">
          <div class="box_title">设备流量统计</div>
          <water-chart :btDat="fluxStics" />
          <span class="left"></span>
          <span class="right"></span>
          <span class="bottomL"></span>
          <span class="bottomR"></span>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="statistics box_home">
          <ul class="time flex flex_bet felx_align">
            <li>
              <count-to :start-val="0" :end-val="numberData.zxSum" :duration="1000" class="card-panel-num" />
              <div class="text">在线总数 (台)</div>
            </li>
            <li>
              <count-to :start-val="0" :end-val="numberData.sbSum" :duration="1000" class="card-panel-num" />
              <div class="text">设备总数 (台)</div>
            </li>
            <li>
              <count-to :start-val="0" :end-val="numberData.jhSum" :duration="1000" class="card-panel-num" />
              <div class="text">激活总数 (台)</div>
            </li>
            <li>
              <count-to :start-val="0" :end-val="numberData.jsSum" :duration="1000" class="card-panel-num" />
              <div class="text">解锁设备数 (台)</div>
            </li>
          </ul>
          <columnar :chartData="numberData" />
          <span class="left"></span>
          <span class="right"></span>
          <span class="bottomL"></span>
          <span class="bottomR"></span>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="statistics dataCharts box_home">
          <div class="titile">
            <ul class="flex flex_bet felx_align">
              <li v-for="(item,index) in appDatas" :key="index" :class="active == index ? 'active' : 'info'" @click="switchHover(index)">{{item.name}}</li>
            </ul>
            <div v-if="active == 0">
              <school-pic :btDat="infoBb" :title="'设备信息版本占比'" />
            </div>
            <div v-if="active == 1">
              <school-pic :btDat="jgyData" :title="'教官壹版本占比'" />
            </div>
            <div v-if="active == 2">
              <school-pic :btDat="versions" :title="'安卓固件占比'" />
            </div>
          </div>
          <span class="left"></span>
          <span class="right"></span>
          <span class="bottomL"></span>
          <span class="bottomR"></span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="seamless box_home">
          <div class="box_title">应用上传统计<span style="margin-left:10px">(合计：{{appNumber}})</span></div>
          <table>
            <ul class="flex felx_align flex_bet title_app">
              <li style="width:10%">应用图标</li>
              <li>应用名称</li>
              <li>应用类型</li>
              <li>应用大小</li>
              <li>上传时间</li>
              <li>操作人</li>
            </ul>
            <div v-if="!appData.length" style="width:auto;height:256px" class="flex flex_cen felx_align">
              <i class="iconfont iconzanwushuju" style="font-size:130px"></i>
            </div>
            <tbody v-else class="table_box">
              <ul class="item">
                <li v-for="(item,index) in appData" :key="index" class="flex item_li felx_align flex_bet">
                  <div class="seamless_img"><img :src="item.app_img" alt=""></div>
                  <div class="seamless_txt">{{item.app_name}}</div>
                  <div class="seamless_txt">{{item.app_attribution ? '专属应用' : '公共应用'}}</div>
                  <div class="seamless_txt">{{item.app_size | zhDate}}</div>
                  <div class="seamless_txt">{{item.app_createtime | newDate}}</div>
                  <div class="seamless_txt">{{item.username}}</div>
                </li>
              </ul>
            </tbody>
          </table>
          <span class="left"></span>
          <span class="right"></span>
          <span class="bottomL"></span>
          <span class="bottomR"></span>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="box_home">
          <div class="box_title">设备活跃统计</div>
          <bolumnarTwo :chartData="lineChartData" />
          <span class="left"></span>
          <span class="right"></span>
          <span class="bottomL"></span>
          <span class="bottomR"></span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="agencyLg.agentLg">
        <div class="box_home">
          <div class="box_title">代理商设备统计<span style="margin-left:10px" v-if="agentNumber.agent">(合计：{{agentNumber.agent}})</span></div>
          <bar-chart :chartData="agentData" />
          <span class="left"></span>
          <span class="right"></span>
          <span class="bottomL"></span>
          <span class="bottomR"></span>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="agencyLg.batchLg">
        <div class="box_home">
          <div class="box_title">批次数据统计<span style="margin-left:10px" v-if="agentNumber.batch">(合计：{{agentNumber.batch}})</span></div>
          <bar-chart :chartData="batchData" :xColor="false" yColor="#d3d5fd" title="批次数据统计" />
          <span class="left"></span>
          <span class="right"></span>
          <span class="bottomL"></span>
          <span class="bottomR"></span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { statisticsFlow, SumCount, activateMacNum, OnlineCount, lockCount, getAppUploadLog, weekCount, classifyCount, getSelectUserId } from "@/api/dashboard.js";
import waterChart from './components/waterChart'
import SchoolPic from './components/SchoolPic'
import Bolumnar from './components/Bolumnar'
import { deviceVersionPer, manageVersionPer, RomVersionPer } from "@/api/bordereaux.js";
import CountTo from 'vue-count-to'
import vueSeamlessScroll from 'vue-seamless-scroll'
import BarChart from './components/RaddarChart'
import Columnar from './components/Columnar'
import BolumnarTwo from './components/bolumnarTwo'
import forbid from '@/directive/permission/forbid.js'
import mqttHandle from "@/utils/mqttHandler";
import {mapGetters} from "vuex";

var client;
var topicSends = ["MQTT/T/UPDATE_DEVICE_INFO/#"]  //通配符匹配
export default {
  components: {
    waterChart, SchoolPic, CountTo, vueSeamlessScroll, Bolumnar, BarChart, Columnar, BolumnarTwo
  },
  data() {
    return {
      fluxStics: {},//流量统计
      appDatas: [{ name: '设备信息App' }, { name: '教管壹App' }, { name: '系统固件' }],
      active: 0,
      infoBb: [],
      jgyData: [],
      versions: [],
      numberData: { zxSum: 0, sbSum: 0, jhSum: 0, jsSum: 0 },
      appData: [],
      appNumber: 0,
      lineChartData: { expectedData: [], keysdData: [] },
      agentData: [],//代理商数据
      agentNumber: {},
      batchData: [],
      userInfo: [],
      times: {},
      infoNmae: localStorage.getItem("username"),
      timer: null,
      forbid: Boolean,
      agencyLg: { agentLg: 12, batchLg: 12 },
    }
  },
  computed: {
    defaultOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    ...mapGetters(['brandInfo'])
  },
  mounted() {
    let key = forbid(['超级管理员', '管理员', '代理商'])
    if (key) {//代理商一下级别进来不显示代理商设备统计
      this.agencyLg = { agentLg: 0, batchLg: 24 }
    }
    //自动切换
    let timer = setInterval(() => {
      this.active += 1
      if (this.active > 2) {
        this.active = 0
      }
    }, 6000);
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
  },
  created() {
    this.getstatisticsFlow()
    this.getdeviceVersionPer()
    this.getmanageVersionPer()
    this.getRomVersionPer()
    this.getOnlineCount()
    this.getSumCount()
    this.getactivateMacNum()
    this.getlockCount()
    this.getAppUploadLogs()
    this.getweekCount()
    this.getclassifyCount()
    this.getCurrentDate()
    this.getSelectUserId()
  },
  methods: {
    //下拉菜单触发
    handleCommand(value) {
      this.getstatisticsFlow(value.id)
      this.getdeviceVersionPer(value.id)
      this.getmanageVersionPer(value.id)
      this.getRomVersionPer(value.id)
      this.getOnlineCount(value.id)
      this.getSumCount(value.id)
      this.getactivateMacNum(value.id)
      this.getlockCount(value.id)
      this.getAppUploadLogs(value.id)
      this.getweekCount(value.id)
      this.getclassifyCount(value.id)
      this.getCurrentDate(value.id)
      this.infoNmae = value.username
    },
    //获取下线
    getSelectUserId() {
      getSelectUserId({ userId: localStorage.getItem("ID") }).then(res => {
        this.userInfo = res.data
      }).catch(err => {
        this.userInfo = []
      })
    },
    getCurrentDate() {
      let myDate = new Date();
      let year = myDate.getFullYear(); //年
      let month = myDate.getMonth() + 1; //月
      let day = myDate.getDate(); //日
      let days = myDate.getDay();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      switch (days) {
        case 1:
          days = '星期一';
          break;
        case 2:
          days = '星期二';
          break;
        case 3:
          days = '星期三';
          break;
        case 4:
          days = '星期四';
          break;
        case 5:
          days = '星期五';
          break;
        case 6:
          days = '星期六';
          break;
        case 0:
          days = '星期日';
          break;
      }
      this.times.year = year + "年" + month + "月" + day + "日"
      this.times.days = days
      this.times.hour = hh + ':' + mf + ':' + ss
    },
    getclassifyCount(id = localStorage.getItem("ID")) {
      classifyCount({ userId: id }).then(res => {
        let data = JSON.parse(JSON.stringify(res.data))
        this.agentNumber = { agent: data.agent_count, batch: data.batch_count }
        this.agentData = data.agent
        this.batchData = data.batch.map(item => ({ username: item.batch, num: item.num }))
      })
    },
    switchHover(index) {
      this.active = index
    },
    //获取用户下载流量
    getstatisticsFlow(id = localStorage.getItem("ID")) {
      statisticsFlow({ userId: id }).then(res => {
        this.fluxStics = res.data
      }).catch(err => {
        this.fluxStics = {}
      })
    },
    //获取设备信息版本占比
    getdeviceVersionPer(id = localStorage.getItem("ID")) {
      deviceVersionPer({ userId: id }).then(res => {
        let arr = []
        res.data.forEach(item => {
          if (item.count != 0) {
            arr.push({ value: item.count, name: item.appstore_version })
          }
        })
        this.infoBb = arr
      }).catch(err => {
        this.infoBb = []
      })
    },
    //获取教管易版本占比
    getmanageVersionPer(id = localStorage.getItem("ID")) {
      manageVersionPer({ userId: id }).then(res => {
        let arr = []
        res.data.forEach(item => {
          if (item.count != 0) {
            arr.push({ value: item.count, name: item.store_version })
          }
        })
        this.jgyData = arr
      }).catch(err => {
        this.jgyData = []
      })
    },
    //获取固件版本占比
    getRomVersionPer(id = localStorage.getItem("ID")) {
      RomVersionPer({ userId: id }).then(res => {
        let arr = []
        res.data.forEach(item => {
          if (item.count != 0) {
            arr.push({ value: item.count, name: item.devices_version })
          }
        })
        this.versions = arr
      }).catch(err => {
        this.versions = []
      })
    },
    getOnlineCount(id = localStorage.getItem("ID")) {
      OnlineCount({ userId: id }).then(res => {
        this.numberData.zxSum = res.data
      }).catch(err => {
        this.numberData.zxSum = 0
      })
    },
    getSumCount(id = localStorage.getItem("ID")) {
      SumCount({ userId: id }).then(res => {
        this.numberData.sbSum = res.data
      }).catch(err => {
        this.numberData.sbSum = 0
      })
    },
    getactivateMacNum(id = localStorage.getItem("ID")) {
      activateMacNum({ userId: id }).then(res => {
        this.numberData.jhSum = res.data
      }).catch(err => {
        this.numberData.jhSum = 0
      })
    },
    getlockCount(id = localStorage.getItem("ID")) {
      lockCount({ userId: id }).then(res => {
        this.numberData.jsSum = res.data
      }).catch(err => {
        this.numberData.jsSum = 0
      })
    },
    //应用上传统计
    getAppUploadLogs(id = localStorage.getItem("ID")) {
      getAppUploadLog({ userId: id }).then(res => {
        let data = JSON.parse(JSON.stringify(res.data))
        this.appNumber = res.total
        this.appData = data.splice(0, 6)
        // console.log('----------应用上传统计', res.data, id)
      }).catch(err => {
        this.appData = []
        this.appNumber = 0
      })
    },
    getweekCount(id = localStorage.getItem("ID")) {
      weekCount({ userId: id }).then(res => {
        this.lineChartData.expectedData = Object.values(res.data)
        this.lineChartData.keysdData = Object.keys(res.data)
      }).catch(err => { })
    },
    /**创建mqtt**/
    createMqtt() {
      var mqtt; //mqtt 处理对象（全局变量）
      //创建链接，接收数据
      mqtt = new mqttHandle(topicSends);
      client = mqtt.createConnect();
      client.on("message", (topic, message) => {
        try {
          console.log(topic, message.toString())
        } catch (error) {}
      });
    },
    //停止订阅mqtt
    disConnect() {
      if (client != null) {
        client.unsubscribe(topicSends);
        client = null;
      }
    }
  },
}
</script>

<style scoped>
/deep/ .el-scrollbar .el-scrollbar__wrap {
  max-height: 300px;
  overflow-x: hidden;
  padding: 10px 0;
}
</style>

<style lang="scss" scoped>
.box_home {
  position: relative;
  //padding: 10px 0;
  margin-top: 20px;
  background-color: #0d1b33;
  .left {
    left: 0;
    top: 0;
    border-left: solid 2px #045291;
    border-top: solid 2px #045291;
    position: absolute;
    width: 13px;
    height: 13px;
  }
  .right {
    right: 0;
    top: 0;
    border-right: solid 2px #045291;
    border-top: solid 2px #045291;
    position: absolute;
    width: 13px;
    height: 13px;
  }
  .bottomL {
    left: 0;
    bottom: 0;
    border-left: solid 2px #045291;
    border-bottom: solid 2px #045291;
    position: absolute;
    width: 13px;
    height: 13px;
  }
  .bottomR {
    right: 0;
    bottom: 0;
    border-right: solid 2px #045291;
    border-bottom: solid 2px #045291;
    position: absolute;
    width: 13px;
    height: 13px;
  }
}

.dashboard-editor-container {
  //background-color: rgb(240, 242, 245);
  // position: relative;
  background: url(../../../assets/images/home.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
  padding: 45px 20px 20px 20px;
  .ccc {
    //background: url(../../../assets/images/dashboard8.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
    background-position: top center;
    height: 286px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .statistics {
    padding: 10px 20px;
    .time {
      border: 1px solid #093552;
      padding: 5px;
      li {
        text-align: center;
        border-right: solid 1px #1f4191;
        width: 25%;
        .text {
          color: #1bb9f9;
          font-size: 12px;
          margin-top: 10px;
        }
      }
      li:last-child {
        border-right: 0;
      }
    }
  }
  .dataCharts {
    .titile {
      height: 266px;
      ul {
        li {
          cursor: pointer;
          font-size: 14px;
          padding: 5px 20px;
        }
      }
      .active {
        color: #fff;
        background: url(../../../assets/images/choose-item.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
  .box_title {
    width: 100%;
    color: #1bb9f9;
    line-height: 40px;
    margin-left: 20px;
    font-size: 14px;
    letter-spacing: 1px;
  }
}
.seamless {
  table {
    width: 100%;
    .table_box {
      height: 236px;
      left: 0;
      top: 62px;
      width: 100%;
      overflow: hidden;
      display: block;
      margin-bottom: 20px;
    }
  }
  .item {
    // padding: 0 10px;
    .seamless_img {
      width: 10%;
      text-align: center;
      img {
        height: 25px;
        width: 25px;
        border-radius: 4px;
        overflow: hidde;
      }
    }
    .seamless_txt {
      text-align: center;
      font-size: 12px;
      line-height: 35px;
      width: 18%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #76dbd1;
      line-height: 40px;
    }
  }
  .title_app {
    text-align: center;
    color: #1b96ee;
    font-size: 14px;
    line-height: 30px;
    height: 30px;
    padding: 0 10px;
    width: 100%;
    border-bottom: 1px solid #1b96ee;
    margin-bottom: 10px;
    li {
      width: 18%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
  }
}
.jgy_txt {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 2px;
}
.time {
  .year {
    margin-right: 10px;
    background-image: -webkit-gradient(
      linear,
      0 0,
      0 bottom,
      from(#fff),
      to(#5ec0d2)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 16px;
  }
}
.abbs {
  border: none;
  font-size: 14px;
  color: #1bb9f9;
  background: none;
}
</style>
